<template>
	<view class="container">
		<view class="header">
			<view class="back" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="title">开通会员</text>
		</view>
		
		<view class="vip-banner">
			<image src="https://images.unsplash.com/photo-1536152470836-b943b246224c" mode="aspectFill" class="banner-bg"></image>
			<view class="banner-content">
				<text class="banner-title">解锁更多解梦特权</text>
				<text class="banner-subtitle">AI深度解析，助你揭开梦境奥秘</text>
			</view>
		</view>
		
		<view class="privileges">
			<text class="section-title">会员特权</text>
			<view class="privilege-list">
				<view class="privilege-item">
					<text class="privilege-icon">🎯</text>
					<text class="privilege-name">无限次解梦</text>
				</view>
				<view class="privilege-item">
					<text class="privilege-icon">🔍</text>
					<text class="privilege-name">深度解析</text>
				</view>
				<view class="privilege-item">
					<text class="privilege-icon">💫</text>
					<text class="privilege-name">优先响应</text>
				</view>
				<view class="privilege-item">
					<text class="privilege-icon">📊</text>
					<text class="privilege-name">梦境报告</text>
				</view>
			</view>
		</view>
		
		<view class="plans">
			<text class="section-title">会员方案</text>
			<view class="plan-list">
				<view class="plan-item" :class="{'active': selectedPlan === 'month'}" @click="selectPlan('month')">
					<view class="plan-info">
						<text class="plan-name">月度会员</text>
						<text class="plan-price">￥19.9</text>
					</view>
					<text class="plan-desc">每月解梦不限次数</text>
				</view>
				<view class="plan-item" :class="{'active': selectedPlan === 'year'}" @click="selectPlan('year')">
					<view class="plan-info">
						<text class="plan-name">年度会员</text>
						<text class="plan-price">￥168</text>
					</view>
					<text class="plan-desc">限时特惠，相当于14元/月</text>
					<text class="plan-tag">推荐</text>
				</view>
			</view>
		</view>
		
		<view class="bottom-bar">
			<button class="subscribe-btn" @click="handleSubscribe">立即开通</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedPlan: 'year'
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		selectPlan(plan) {
			this.selectedPlan = plan
		},
		handleSubscribe() {
			uni.showLoading({
				title: '处理中'
			})
			
			// 模拟支付流程
			setTimeout(() => {
				uni.hideLoading()
				uni.showModal({
					title: '支付提示',
					content: '是否确认支付？',
					success: (res) => {
						if (res.confirm) {
							// 处理支付逻辑
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					}
				})
			}, 1000)
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 120rpx;
}

.header {
	display: flex;
	align-items: center;
	padding: 30rpx;
}

.back-icon {
	font-size: 40rpx;
	color: #666;
	margin-right: 20rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.vip-banner {
	position: relative;
	height: 300rpx;
	overflow: hidden;
	margin-bottom: 30rpx;
}

.banner-bg {
	width: 100%;
	height: 100%;
}

.banner-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30rpx;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.banner-title {
	font-size: 40rpx;
	color: #fff;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.banner-subtitle {
	font-size: 26rpx;
	color: rgba(255,255,255,0.8);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin: 30rpx;
	display: block;
}

.privilege-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	padding: 0 30rpx;
}

.privilege-item {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
}

.privilege-icon {
	font-size: 40rpx;
	margin-right: 20rpx;
}

.privilege-name {
	font-size: 28rpx;
	color: #333;
}

.plan-list {
	padding: 0 30rpx;
}

.plan-item {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	position: relative;
	border: 2rpx solid transparent;
}

.plan-item.active {
	border-color: #4080ff;
	background: #f5f8ff;
}

.plan-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.plan-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.plan-price {
	font-size: 36rpx;
	color: #4080ff;
	font-weight: bold;
}

.plan-desc {
	font-size: 24rpx;
	color: #999;
}

.plan-tag {
	position: absolute;
	top: 0;
	right: 30rpx;
	background: #ff4d4f;
	color: #fff;
	font-size: 22rpx;
	padding: 4rpx 16rpx;
	border-radius: 0 0 16rpx 16rpx;
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 20rpx 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.subscribe-btn {
	background: #4080ff;
	color: #fff;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 500;
}
</style> 